<template>
  <div class="resume-search">
    <div class="page-header">
      <h2 class="page-title">简历搜索</h2>
    </div>

    <!-- 搜索条件 -->
    <el-card class="search-card">
      <el-form :model="searchForm" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="关键词">
              <el-input
                v-model="searchForm.keyword"
                placeholder="姓名/技能/职位"
                clearable
                @keyup.enter="handleSearch"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工作经验">
              <el-select v-model="searchForm.experience" placeholder="请选择" clearable>
                <el-option label="应届生" value="fresh" />
                <el-option label="1-3年" value="1-3" />
                <el-option label="3-5年" value="3-5" />
                <el-option label="5-10年" value="5-10" />
                <el-option label="10年以上" value="10+" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学历要求">
              <el-select v-model="searchForm.education" placeholder="请选择" clearable>
                <el-option label="大专" value="college" />
                <el-option label="本科" value="bachelor" />
                <el-option label="硕士" value="master" />
                <el-option label="博士" value="doctor" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="期望城市">
              <el-select v-model="searchForm.city" placeholder="请选择" clearable>
                <el-option label="北京" value="北京" />
                <el-option label="上海" value="上海" />
                <el-option label="广州" value="广州" />
                <el-option label="深圳" value="深圳" />
                <el-option label="杭州" value="杭州" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="更新时间">
              <el-select v-model="searchForm.updateTime" placeholder="请选择" clearable>
                <el-option label="今天" value="today" />
                <el-option label="最近三天" value="3days" />
                <el-option label="最近一周" value="week" />
                <el-option label="最近一月" value="month" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="求职状态">
              <el-select v-model="searchForm.jobStatus" placeholder="请选择" clearable>
                <el-option label="在职找工作" value="working" />
                <el-option label="离职找工作" value="unemployed" />
                <el-option label="应届生" value="graduate" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 简历列表 -->
    <el-card class="resume-list">
      <template #header>
        <div class="card-header">
          <span>找到 {{ total }} 份简历</span>
          <div class="header-actions">
            <el-button-group>
              <el-button :type="viewMode === 'list' ? 'primary' : ''" @click="viewMode = 'list'">
                <el-icon><List /></el-icon>
              </el-button>
              <el-button :type="viewMode === 'grid' ? 'primary' : ''" @click="viewMode = 'grid'">
                <el-icon><Grid /></el-icon>
              </el-button>
            </el-button-group>
          </div>
        </div>
      </template>

      <!-- 列表视图 -->
      <div v-if="viewMode === 'list'" class="list-view">
        <el-table :data="resumeList" style="width: 100%" v-loading="loading">
          <el-table-column label="求职者信息" min-width="200">
            <template #default="{ row }">
              <div class="candidate-info">
                <div class="name">{{ row.name }}</div>
                <div class="basic-info">
                  {{ row.gender }} / {{ row.age }}岁 / {{ row.education }} / {{ row.experience }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="期望职位" prop="expectedPosition" min-width="150" />
          <el-table-column label="期望城市" prop="expectedCity" width="100" />
          <el-table-column label="期望薪资" prop="expectedSalary" width="120" />
          <el-table-column label="求职状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getStatusType(row.jobStatus)">
                {{ getStatusText(row.jobStatus) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="更新时间" prop="updateTime" width="180" />
          <el-table-column label="操作" width="180" fixed="right">
            <template #default="{ row }">
              <el-button link type="primary" @click="viewResume(row)">查看</el-button>
              <el-button link type="success" @click="inviteInterview(row)">邀面试</el-button>
              <el-button link type="info" @click="downloadResume(row)">下载</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 网格视图 -->
      <div v-else class="grid-view">
        <el-row :gutter="20">
          <el-col v-for="resume in resumeList" :key="resume.id" :span="6">
            <el-card shadow="hover" class="resume-card">
              <div class="resume-header">
                <div class="name">{{ resume.name }}</div>
                <el-tag :type="getStatusType(resume.jobStatus)" size="small">
                  {{ getStatusText(resume.jobStatus) }}
                </el-tag>
              </div>
              <div class="resume-content">
                <div class="info-item">
                  <span class="label">期望职位：</span>
                  <span class="value">{{ resume.expectedPosition }}</span>
                </div>
                <div class="info-item">
                  <span class="label">工作经验：</span>
                  <span class="value">{{ resume.experience }}</span>
                </div>
                <div class="info-item">
                  <span class="label">学历：</span>
                  <span class="value">{{ resume.education }}</span>
                </div>
                <div class="info-item">
                  <span class="label">期望薪资：</span>
                  <span class="value highlight">{{ resume.expectedSalary }}</span>
                </div>
              </div>
              <div class="resume-footer">
                <el-button-group>
                  <el-button size="small" @click="viewResume(resume)">查看</el-button>
                  <el-button type="success" size="small" @click="inviteInterview(resume)">邀面试</el-button>
                  <el-button type="info" size="small" @click="downloadResume(resume)">下载</el-button>
                </el-button-group>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[12, 24, 36, 48]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 简历详情对话框 -->
    <el-dialog
      v-model="resumeDetailVisible"
      title="简历详情"
      width="800px"
      destroy-on-close
    >
      <div v-if="currentResume" class="resume-detail">
        <!-- 基本信息 -->
        <div class="section basic-info">
          <div class="header">
            <div class="left">
              <h3 class="name">{{ currentResume.name }}</h3>
              <div class="info">
                {{ currentResume.gender }} / {{ currentResume.age }}岁 / {{ currentResume.education }}
              </div>
            </div>
            <div class="right">
              <el-button type="success" @click="inviteInterview(currentResume)">邀请面试</el-button>
            </div>
          </div>
          <div class="content">
            <div class="info-row">
              <span class="label">手机号码：</span>
              <span class="value">{{ currentResume.phone }}</span>
            </div>
            <div class="info-row">
              <span class="label">电子邮箱：</span>
              <span class="value">{{ currentResume.email }}</span>
            </div>
            <div class="info-row">
              <span class="label">现居城市：</span>
              <span class="value">{{ currentResume.currentCity }}</span>
            </div>
          </div>
        </div>

        <!-- 求职意向 -->
        <div class="section">
          <h4 class="section-title">求职意向</h4>
          <div class="content">
            <div class="info-row">
              <span class="label">期望职位：</span>
              <span class="value">{{ currentResume.expectedPosition }}</span>
            </div>
            <div class="info-row">
              <span class="label">期望城市：</span>
              <span class="value">{{ currentResume.expectedCity }}</span>
            </div>
            <div class="info-row">
              <span class="label">期望薪资：</span>
              <span class="value highlight">{{ currentResume.expectedSalary }}</span>
            </div>
            <div class="info-row">
              <span class="label">求职状态：</span>
              <span class="value">
                <el-tag :type="getStatusType(currentResume.jobStatus)">
                  {{ getStatusText(currentResume.jobStatus) }}
                </el-tag>
              </span>
            </div>
          </div>
        </div>

        <!-- 工作经历 -->
        <div class="section">
          <h4 class="section-title">工作经历</h4>
          <div class="content">
            <el-timeline>
              <el-timeline-item
                v-for="(work, index) in currentResume.workExperience"
                :key="index"
                :timestamp="work.period"
                placement="top"
              >
                <div class="experience-item">
                  <div class="company">{{ work.company }}</div>
                  <div class="position">{{ work.position }}</div>
                  <div class="description">{{ work.description }}</div>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>

        <!-- 教育经历 -->
        <div class="section">
          <h4 class="section-title">教育经历</h4>
          <div class="content">
            <el-timeline>
              <el-timeline-item
                v-for="(edu, index) in currentResume.education"
                :key="index"
                :timestamp="edu.period"
                placement="top"
              >
                <div class="experience-item">
                  <div class="school">{{ edu.school }}</div>
                  <div class="major">{{ edu.major }} | {{ edu.degree }}</div>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>

        <!-- 技能特长 -->
        <div class="section">
          <h4 class="section-title">技能特长</h4>
          <div class="content">
            <div class="skills">
              <el-tag
                v-for="(skill, index) in currentResume.skills"
                :key="index"
                class="skill-tag"
              >
                {{ skill }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 面试邀请对话框 -->
    <el-dialog
      v-model="interviewDialogVisible"
      title="发送面试邀请"
      width="500px"
      append-to-body
    >
      <el-form :model="interviewForm" label-width="100px">
        <el-form-item label="面试职位" required>
          <el-select v-model="interviewForm.position" placeholder="请选择职位">
            <el-option
              v-for="job in jobList"
              :key="job.id"
              :label="job.title"
              :value="job.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="面试时间" required>
          <el-date-picker
            v-model="interviewForm.time"
            type="datetime"
            placeholder="选择面试时间"
            format="YYYY-MM-DD HH:mm"
            value-format="YYYY-MM-DD HH:mm"
            :disabled-date="disabledDate"
            :disabled-hours="disabledHours"
          />
        </el-form-item>
        <el-form-item label="面试地点" required>
          <el-input v-model="interviewForm.location" placeholder="请输入面试地点" />
        </el-form-item>
        <el-form-item label="面试形式" required>
          <el-radio-group v-model="interviewForm.type">
            <el-radio label="offline">现场面试</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注说明">
          <el-input
            v-model="interviewForm.notes"
            type="textarea"
            rows="3"
            placeholder="请输入备注说明"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="interviewDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="sendInterviewInvitation" :loading="submitLoading">
            发送邀请
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { List, Grid } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 搜索表单
const searchForm = reactive({
  keyword: '',
  experience: '',
  education: '',
  city: '',
  updateTime: '',
  jobStatus: ''
})

// 视图模式
const viewMode = ref('list')

// 加载状态
const loading = ref(false)

// 分页
const currentPage = ref(1)
const pageSize = ref(12)
const total = ref(0)

// 简历列表数据
const resumeList = ref([])

// 获取简历列表
const fetchResumeList = async () => {
  loading.value = true
  try {
    // 模拟API请求
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 模拟数据
    const mockData = Array(50).fill().map((_, index) => ({
      id: 10000 + index,
      name: ['张三', '李四', '王五', '赵六', '钱七'][index % 5],
      gender: index % 2 === 0 ? '男' : '女',
      age: 25 + (index % 10),
      education: ['本科', '硕士', '博士', '大专'][index % 4],
      experience: ['应届生', '1-3年', '3-5年', '5-10年'][index % 4],
      expectedPosition: ['前端开发工程师', 'Java开发工程师', 'UI设计师', '产品经理'][index % 4],
      expectedCity: ['北京', '上海', '广州', '深圳', '杭州'][index % 5],
      expectedSalary: ['10k-15k', '15k-20k', '20k-25k', '25k-30k'][index % 4],
      jobStatus: ['working', 'unemployed', 'graduate'][index % 3],
      updateTime: `2024-03-${18 - (index % 7)} ${10 + (index % 8)}:${index % 60}:00`,
      phone: `138${String(10000000 + index).slice(-8)}`,
      email: `user${index}@example.com`,
      currentCity: ['北京', '上海', '广州', '深圳', '杭州'][index % 5],
      workExperience: [
        {
          period: '2020.07 - 至今',
          company: '某某科技有限公司',
          position: '高级开发工程师',
          description: '负责公司核心产品的开发和维护工作，参与重要技术决策。'
        },
        {
          period: '2018.03 - 2020.06',
          company: '某某网络科技公司',
          position: '开发工程师',
          description: '参与多个项目的开发工作，负责功能实现和代码优化。'
        }
      ],
      education: [
        {
          period: '2014.09 - 2018.06',
          school: '某某大学',
          major: '计算机科学与技术',
          degree: '本科'
        }
      ],
      skills: ['JavaScript', 'Vue.js', 'React', 'Node.js', 'Java', 'Spring Boot']
    }))
    
    // 根据搜索条件筛选
    let filteredData = [...mockData]
    
    if (searchForm.keyword) {
      const keyword = searchForm.keyword.toLowerCase()
      filteredData = filteredData.filter(item => 
        item.name.toLowerCase().includes(keyword) ||
        item.expectedPosition.toLowerCase().includes(keyword) ||
        item.skills.some(skill => skill.toLowerCase().includes(keyword))
      )
    }
    
    if (searchForm.experience) {
      filteredData = filteredData.filter(item => item.experience === searchForm.experience)
    }
    
    if (searchForm.education) {
      filteredData = filteredData.filter(item => item.education === searchForm.education)
    }
    
    if (searchForm.city) {
      filteredData = filteredData.filter(item => item.expectedCity === searchForm.city)
    }
    
    if (searchForm.jobStatus) {
      filteredData = filteredData.filter(item => item.jobStatus === searchForm.jobStatus)
    }
    
    // 更新总数
    total.value = filteredData.length
    
    // 分页处理
    const start = (currentPage.value - 1) * pageSize.value
    const end = start + pageSize.value
    resumeList.value = filteredData.slice(start, end)
    
  } catch (error) {
    console.error('获取简历列表失败', error)
    ElMessage.error('获取简历列表失败')
  } finally {
    loading.value = false
  }
}

// 获取状态类型
const getStatusType = (status) => {
  const map = {
    'working': 'warning',
    'unemployed': 'danger',
    'graduate': 'success'
  }
  return map[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const map = {
    'working': '在职',
    'unemployed': '离职',
    'graduate': '应届生'
  }
  return map[status] || status
}

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1
  fetchResumeList()
}

// 重置搜索
const resetSearch = () => {
  Object.keys(searchForm).forEach(key => {
    searchForm[key] = ''
  })
  currentPage.value = 1
  fetchResumeList()
}

// 处理页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchResumeList()
}

// 处理每页条数变化
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  fetchResumeList()
}

// 简历详情相关
const resumeDetailVisible = ref(false)
const currentResume = ref(null)

// 查看简历详情
const viewResume = (resume) => {
  currentResume.value = resume
  resumeDetailVisible.value = true
}

// 面试邀请相关
const interviewDialogVisible = ref(false)
const interviewForm = reactive({
  position: '',
  time: '',
  location: '',
  type: 'offline',
  notes: ''
})
const submitLoading = ref(false)

// 模拟职位列表
const jobList = ref([
  { id: 1, title: '前端开发工程师' },
  { id: 2, title: 'Java开发工程师' },
  { id: 3, title: 'UI设计师' },
  { id: 4, title: '产品经理' }
])

// 发起面试邀请
const inviteInterview = (resume) => {
  currentResume.value = resume
  interviewForm.position = ''
  interviewForm.time = ''
  interviewForm.location = ''
  interviewForm.type = 'offline'
  interviewForm.notes = ''
  interviewDialogVisible.value = true
}

// 发送面试邀请
const sendInterviewInvitation = async () => {
  if (!interviewForm.position || !interviewForm.time || !interviewForm.location) {
    ElMessage.warning('请填写完整的面试信息')
    return
  }
  
  submitLoading.value = true
  try {
    // 模拟API请求
    await new Promise(resolve => setTimeout(resolve, 1000))
    ElMessage.success('面试邀请已发送')
    interviewDialogVisible.value = false
  } catch (error) {
    console.error('发送面试邀请失败', error)
    ElMessage.error('发送面试邀请失败')
  } finally {
    submitLoading.value = false
  }
}

// 下载简历
const downloadResume = (resume) => {
  ElMessage.success(`开始下载 ${resume.name} 的简历`)
}

// 禁用的日期（今天之前的日期）
const disabledDate = (time) => {
  return time.getTime() < Date.now() - 8.64e7
}

// 禁用的小时（工作时间外）
const disabledHours = () => {
  const hours = []
  for (let i = 0; i < 24; i++) {
    if (i < 9 || i > 18) {
      hours.push(i)
    }
  }
  return hours
}

// 初始化
fetchResumeList()
</script>

<style lang="scss" scoped>
.resume-search {
  padding: 20px;

  .page-header {
    margin-bottom: 20px;

    .page-title {
      font-size: 24px;
      font-weight: 600;
      color: #303133;
      margin: 0;
    }
  }

  .search-card {
    margin-bottom: 20px;
  }

  .resume-list {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
    }

    .list-view {
      .candidate-info {
        .name {
          font-size: 16px;
          font-weight: 600;
          margin-bottom: 5px;
        }

        .basic-info {
          color: #606266;
          font-size: 13px;
        }
      }
    }

    .grid-view {
      .resume-card {
        margin-bottom: 20px;

        .resume-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15px;

          .name {
            font-size: 16px;
            font-weight: 600;
          }
        }

        .resume-content {
          margin-bottom: 15px;

          .info-item {
            margin-bottom: 8px;
            font-size: 14px;

            .label {
              color: #909399;
            }

            .value {
              &.highlight {
                color: #f56c6c;
                font-weight: 600;
              }
            }
          }
        }

        .resume-footer {
          display: flex;
          justify-content: center;
        }
      }
    }

    .pagination-container {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
}

// 简历详情样式
.resume-detail {
  .section {
    margin-bottom: 24px;

    &.basic-info {
      .header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20px;

        .name {
          font-size: 24px;
          font-weight: 600;
          margin: 0 0 8px;
        }

        .info {
          color: #606266;
        }
      }
    }

    .section-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0 0 16px;
      padding-left: 12px;
      border-left: 4px solid #409EFF;
    }

    .content {
      .info-row {
        margin-bottom: 12px;
        
        .label {
          color: #909399;
          margin-right: 8px;
        }

        .value {
          &.highlight {
            color: #f56c6c;
            font-weight: 600;
          }
        }
      }

      .experience-item {
        margin-bottom: 16px;

        .company, .school {
          font-weight: 600;
          margin-bottom: 4px;
        }

        .position, .major {
          color: #606266;
          margin-bottom: 8px;
        }

        .description {
          color: #909399;
          font-size: 14px;
          line-height: 1.6;
        }
      }

      .skills {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;

        .skill-tag {
          margin: 0;
        }
      }
    }
  }
}

// 响应式布局
@media (max-width: 768px) {
  .resume-search {
    .grid-view {
      .el-col {
        width: 100%;
      }
    }
  }
}
</style> 